<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
	<th:block th:include="include :: header('商品列表')" />
	<th:block th:include="include :: bootstrap-editable-css" />
</head>
<body class="gray-bg">
<!-- 表格行内编辑插件 -->
<div th:fragment="bootstrap-editable-css">
	<link th:href="@{/ajax/libs/bootstrap-table/extensions/editable/bootstrap-editable.css}" rel="stylesheet"/>
</div>
	<div class="container-div">
		<div class="row">
			<div class="col-sm-12 search-collapse">
				<form id="post-form">
					<div class="select-list">
						<ul>
							<li>
								商品编码：<input type="text" name="postCode"/>
							</li>
							<li>
								商品名称：<input type="text" name="postName"/>
							</li>
							<li>
								商品状态：<select name="status" th:with="type=${@dict.getType('sys_normal_disable')}">
									<option value="">所有</option>
									<option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option>
								</select>
							</li>
							<li>
								<a class="btn btn-primary btn-rounded btn-sm" onclick="$.table.search()"><i class="fa fa-search"></i>&nbsp;搜索</a>
							    <a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset()"><i class="fa fa-refresh"></i>&nbsp;重置</a>
							</li>
						</ul>
					</div>
				</form>
			</div>
			
			<div class="btn-group-sm" id="toolbar" role="group">
				<a class="btn btn-success" onclick="addChildren()" shiro:hasPermission="system:water:addChildren">
		<i class="fa fa-plus"></i> 新增
				</a>
				<a class="btn btn-primary single disabled" onclick="$.operate.edit()" shiro:hasPermission="system:water:update">
				<i class="fa fa-edit"></i> 修改
				</a>
				<a class="btn btn-danger multiple disabled" onclick="$.operate.removeAll()" shiro:hasPermission="system:water:remove">
				<i class="fa fa-remove"></i> 删除
				</a>
				<!--				<a class="btn btn-warning" onclick="$.table.exportExcel()" shiro:hasPermission="system:post:export">-->
				<!--		            <i class="fa fa-download"></i> 导出-->
				<!--		        </a>-->
				</div>

				<div class="col-sm-12 select-table table-striped">
				<table id="bootstrap-table"></table>
				</div>
				</div>
				</div>
				<th:block th:include="include :: footer" />
				<th:block th:include="include :: bootstrap-table-editable-js" />
				<script th:inline="javascript">
		var addFlag2 = [[${@permission.hasPermi('water:product:view')}]];
		var manageFlag = [[${@permission.hasPermi('property:user:view')}]];
		var editFlag = [[${@permission.hasPermi('water:product:edit')}]];
		var removeFlag = [[${@permission.hasPermi('water:product:remove')}]];
		var datas = [[${@dict.getType('sys_normal_disable')}]];
		var prefix = ctx + "water";
		$(function() {
			var id = [[${id}]];
			console.log(id);
		    var options = {
		        url:  prefix+ "/listNorm/"+id,
		        createUrl: prefix + "/addChildProduct",
		        updateUrl: prefix + "/edit/{id}",
		        removeUrl: prefix + "/removeChildProduct",
		        exportUrl: prefix + "/export",
		        modalName: "商品列表",
				showSearch: false,
				showRefresh: false,
				showToggle: false,
				showColumns: false,
				showPageGo: true,
				onEditableSave: onEditableSave,
		        columns: [{
		            checkbox: true
		        },
		        {
		            field: 'product_id',
		            title: '主商品编号'
		        },
					{
						field: 'child_id',
						title: '子商品编号'
					},
		        {
		            field: 'name',
		            title: '商品名称',
		        },
					{
						field: 'img',
						title: '图片',
						formatter: function(value, row, index) {
							// 图片预览（注意：如存储在本地直接获取数据库路径，如有配置context-path需要使用ctx+路径）
							// 如：/profile/upload/2019/08/08/3b7a839aced67397bac694d77611ce72.png
								return $.table.imageView(value);

						}
					},
					{
						field: 'size',
						title: '商品规格',
					},
					{
						field: 'price',
						title: '商品价格',
						formatter: function(value,row,index){
							var price = value/100;
							return  price;
						}
					},
					{
						field: 'stock',
						 title: '商品库存',
						 editable: true,
						// formatter : function(value,row,index){
						// 	return changeStock(row);
						// }
					},
					{
						field: 'state',
						title: '状态',
						formatter: function(value, row, index) {
							var actions = [];
							if(value == 1){
								actions.push('<span style="color: darkseagreen">上架</span>&nbsp;');
							}else if (value == 0){
								actions.push('<span style="color: orangered">下架</span>&nbsp;');
							}else {
								actions.push('<span style="color: orangered">异常</span>&nbsp;');
							}
							return actions.join('');
						}
					},
					{
						visible: editFlag == 'hidden' ? false : true,
						// title: '状态',
						align: 'center',
						formatter: function (value, row, index) {
							return statusTools(row);
						}
					},
		        {
		            title: '操作',
		            align: 'center',
		            formatter: function(value, row, index) {
		                var actions = [];
						actions.push("<a class='btn btn-primary btn-xs " + addFlag2 + "' href='javascript:void(0)' onclick='editChildren(" + row.child_id + ")'><i class='fa fa-key'></i>编辑子商品</a> ");
						actions.push('<a class="btn btn-danger btn-xs ' + removeFlag + '" href="javascript:void(0)" onclick="$.operate.remove(\'' + row.child_id+'\')"><i class="fa fa-remove"></i>删除</a>&nbsp;');
						return actions.join('');
		            }
		        }]
		    };
		    $.table.init(options);
		});
		//修改库存
		function onEditableSave (field, row, oldValue, $el) {
			console.log(row.stock);
			console.log(row.child_id);
			alert("字段名：" + field + "，当前值：" + row[field]  + "，旧值：" + oldValue);

			$.operate.post(prefix+"/changeStock",{"child_id": row.child_id,"stock" : row.stock });
		}
		function  addChildren() {
			// $.operate.add();wewewwewewew
			var id = [[${id}]];
			$.modal.open('添加子商品', prefix + "/addChildren/"+id, '1000', '800');
		}
		function  editChildren(id) {
			 $.modal.open('编辑子商品', prefix + "/editChildren/"+id, '1000', '800');
			// $.modal.openTab('编辑子商品',prefix + "/editChildren/"+id);
		}
		var productState = null;
		var product_id = null;
		/* 商品上架 */
		function statusTools(row) {
			productState = row.productState;
			product_id = row.product_id;
			console.log(productState);
			if (row.state == 0) {
				return '<i class=\"fa fa-toggle-off text-info fa-2x\" onclick="enable(\'' + row.child_id + '\')"></i> ';
			} else {
				return '<i class=\"fa fa-toggle-on text-info fa-2x\" onclick="disable(\'' + row.child_id + '\')"></i> ';
			}
		}
		/* 商品下架 */
		function disable(child_id) {
			$.modal.confirm("确认要下架商品吗？", function() {
				console.log("下架："+productState);
				$.operate.post(prefix + "/changeStatus", { "child_id": child_id, "state": 0,"product_id":product_id});
			})
		}

		/* 商品上架 */
		function enable(child_id) {
			$.modal.confirm("确认要上架商品吗？", function() {
				$.operate.post(prefix + "/changeStatus", { "child_id": child_id, "state": 1,"product_id":product_id});
			})
		}
	</script>
<script type="text/javascript">

</script>
</body>
</html>